document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("input");
  const btnAdd = document.getElementById("btn");
  const result = document.getElementById("result");
  const total = document.getElementById("total");
  let i = 0;

  // addEventListener
  btnAdd.addEventListener("click", (e) => {
    if (input.value === "") return;
    createDeleteElements();
    input.value = "";
  });
  
  // create and delete todo
  function createDeleteElements() {
    const value = input.value;
    i++;

    const item = document.createElement("li");
    item.className = "item";
    const text = document.createElement("p");
    text.textContent = value;
    item.appendChild(text);
    
    // edit button
    const btnEdit = document.createElement("button");
    btnEdit.className = "btn btn-edit";
    btnEdit.textContent = "Изменить";
    item.appendChild(btnEdit);
    // add to change the input
    btnEdit.addEventListener("click", (e) => {
      const value = input.value;
      text.textContent = value;
      // проверка на присутствие класса .item-active
      if (item.classList.contains('item-active')) {
        item.classList.remove('item-active');
      }
      input.value = "";
    });
    
    // button Done
    const btnDone = document.createElement("button");
    btnDone.className = "btn btn-done";
    btnDone.textContent = "Сделано"
    item.appendChild(btnDone);
    // done
    btnDone.addEventListener("click", (e) => {
      item.classList.toggle("item-active");
    });
    
    // button Delete
    const btnDel = document.createElement("button");
    btnDel.className = "btn btn-remove";
    btnDel.textContent = "Удалить";
    item.appendChild(btnDel);
    // delete todo
    btnDel.addEventListener("click", (e) => {
      result.removeChild(item);
      i--;
      total.textContent = i;
    });

    total.textContent = i;

    result.appendChild(item);
  }
});
